<template>
  <div>
    <van-sticky>
    <div ref="navBar">
      <van-nav-bar :title="headerObj.title" :right-text="headerObj.rightText" :left-text="headerObj.leftText"  :left-arrow="showLeftArrow" @click-left="onClickLeft" @click-right="onClickRight" />
    </div>
    <!-- <div :style="{ height: isFixed ? headerH + 'px' : '0' }"></div> -->
    </van-sticky>
  </div>
</template>
<script>
export default {
  props: {
    headerObj: {
      type: Object,
      default: () => {}
    },
    showLeftArrow: {
      type: Boolean,
      default: true
    },
    isFixed: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      headerH: 0
    }
  },
  methods: {
    onClickLeft() {
      this.$emit('left-click')
    },
    onClickRight() {
      this.$emit('right-click')
    },
    getNavBarHeight() {
      const navBar = this.$refs.navBar
      const navBarChildren = navBar.children
      this.headerH = navBarChildren[0].clientHeight
    }
  },
  mounted() {
    this.getNavBarHeight()
  }
}
</script>
<style scoped>
::v-deep .van-nav-bar__title {
  font-weight: bold;
}
</style>
